<template>
    <div id="app">
        <Header notab=""/>
        <div class="contentWeb">
            <div style="background: #fff; padding: 40px; margin-top: 30px;">
                <h2 style="margin-bottom: 45px;">找回密码</h2>
                <el-form ref="form" :model="form" :rules="rules" label-width="180px" style="margin-top: 20px;">
                    <el-form-item label="手机号" prop="mobileNum">
                        <el-input placeholder="请输入" v-model="form.mobileNum" :disabled="disabled" style="width: 600px"/>
                    </el-form-item>
                    <el-form-item label="验证码" prop="vcode">
                        <el-input placeholder="请输入" v-model="form.vcode" style="width: 370px"/>
                        <div style="margin-left: 20px;
                          width: 130px;
                          height: 40px;
                          border: 1px solid #f5f5f5;
                          display: inline-block;
                          margin-top: 0px;
                          display:inline-block">
                          <Captch height="40px" @update="captchValue"></Captch>
                        </div>
                    </el-form-item>
                    <el-form-item label="短信验证码" prop="smsCode">
                        <el-input placeholder="请输入" v-model="form.smsCode" style="width: 370px"/>
                        <el-button :disabled="sendCode > 0 ?true: false" @click="sendSms"
                                   style="background: #20a2b2; width: 200px; border: 0; margin-left: 30px;"
                                   type="primary">{{sendCode ? sendCode+'秒后可再次获取' : '点击获取验证码'}}
                        </el-button>
                    </el-form-item>
                    <el-form-item style="margin-top: 60px">
                        <el-button style="background: #20a2b2; width: 300px; border: 0; margin-left: 150px;"
                                   type="primary"
                                   @click="onSubmit('form')">确定
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-dialog
                :close-on-click-modal="false"
                :close="onDgClose"
                :visible.sync="showDialog" width="650px">
                <el-form ref="pwdForm" :model="pwdForm" :rules="pwdRules" label-width="80px" style="margin-top: 20px;">
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" placeholder="请输入" autocomplete="off" v-model="pwdForm.password"
                                  style="width: 500px"/>
                    </el-form-item>
                    <el-form-item label="重复密码" required>
                        <el-input type="password" placeholder="请输入" autocomplete="off" v-model="pwdForm.password2"
                                  style="width: 500px"/>
                        <br/><span class="tishiy" style="color: red">{{passtext}}</span>
                    </el-form-item>
                    <el-form-item style="margin-top: 60px">
                        <el-button style="background: #20a2b2; width: 300px; border: 0; margin-left: 80px;"
                                   type="primary"
                                   @click="onSave('pwdForm')">提交
                        </el-button>
                    </el-form-item>
                </el-form>
        </el-dialog>
        <Footer/>
    </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import util from '../../assets/js/util'
import Header from '../../components/header'
import Footer from '../../components/footer'
import Captch from '../../components/captch'
import { GetUrlParam, sendMessage, CompanyCheckMobileNum, CompanyFindBackPassword, userCheckMobileNum, userFindBackPassword } from '../../assets/js/domains'

export default {
  name: 'Company',
  components: {
    Header,
    Footer,
    Captch
  },
  directives: {},
  data: function () {
    return {
      rules: {
        smsCode: [
          {
            required: true,
            message: '请输入短信验证码',
            trigger: 'blur'
          }
        ],
        vcode: [
          {
            required: true,
            message: '请输入图片验证码',
            trigger: 'blur'
          }
        ],
        mobileNum: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            validator: this.phonechange,
            trigger: 'blur'
          }
        ]

      },
      pwdRules: {
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            validator: this.validatePass,
            trigger: 'blur'
          }
        ]
      },
      vcode: '',
      disabled: false,
      showDialog: false,
      form: {
        mobileNum: '',
        vcode: '',
        smsCode: ''
      },
      pwdForm: {
        password: '',
        password2: ''
      },
      passtext: '',
      smsCode: '',
      sendCode: 0,
      shenfen: ''
    }
  },
  created: function () {
    document.title = '找回密码'
  },
  computed: {
  },
  mounted: function () {
    this.shenfen = GetUrlParam('sf')
    console.log(this.shenfen)
  },
  methods: {
    phonechange: function (rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        var myreg = /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/
        if (!myreg.test(value)) {
          callback(new Error('手机号格式不正确'))
        } else {
          callback()
        }
      }
    },
    validatePass: function (rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
        var re = new RegExp(reg)
        if (re.test(value)) {
          callback()
        } else {
          callback(new Error('密码格式不正确,请输入6-16位字母与数字的组合'))
        }
      }
    },
    onSubmit: function (form) {
      const _this = this
      this.$refs[form].validate(function (valid) {
        if (!valid) {
          return false
        }
        if (_this.smsCode != _this.form.smsCode) {
          _this.$message.error('短信验证码不正确！')
          return false
        }
        const params = { mobile_num: _this.form.mobileNum }
        if (_this.shenfen == 2) {
          userCheckMobileNum(params).then(res => {
            if (res.code == 200) {
              _this.showDialog = true
              return
            }
            _this.$message.error(res.msg)
          })
          return
        }
        CompanyCheckMobileNum(params).then(res => {
          if (res.code == 200) {
            _this.showDialog = true
            return
          }
          _this.$message.error(res.msg)
        })
      })
    },
    onSave: function () {
      const _this = this
      this.$refs.pwdForm.validate(valid => {
        if (!valid) {
          return false
        }
        if (_this.pwdForm.password !== _this.pwdForm.password2) {
          _this.passtext = '密码不一致，请重新输入'
          return false
        }
        _this.passtext = ''
        const params = {
          mobileNum: _this.form.mobileNum,
          password: util.strEncode(_this.pwdForm.password)
        }
        if (_this.shenfen == 2) {
          userFindBackPassword(params).then(res => {
            _this.showDialog = false
            _this.disabled = false
            if (res.code == 200) {
              _this.$alert(res.msg, '提示', {
                confirmButtonText: '确定',
                callback: function () {
                  window.location.href = 'index.html'
                }
              })
              return
            }
            _this.$message.error(res.msg)
          }).catch(() => {
            _this.disabled = false
            _this.showDialog = false
          })
          return
        }
        CompanyFindBackPassword(params).then(res => {
          _this.showDialog = false
          _this.disabled = false
          if (res.code == 200) {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {
                window.location.href = 'index.html'
              }
            })
            return
          }
          _this.$message.error(res.msg)
        }).catch(() => {
          _this.disabled = false
          _this.showDialog = false
        })
      })
    },
    onDgClose () {
      this.pwdForm.password = ''
      this.pwdForm.password2 = ''
    },
    captchValue: function (e) {
      this.vcode = e
    },
    sendSms: function () {
      var _this = this
      if (undefined == this.form.mobileNum || this.form.mobileNum == '' || /(13\d|14[579]|15[^4\D]|17[^49\D]|18\d)\d{8}/g.test(this.form.mobileNum) == false) {
        return
      }
      if (!this.form.vcode) {
        this.$message.error('请输入图片验证码')
        return
      }
      if (this.vcode != this.form.vcode.toUpperCase()) {
        this.$message.error('请输入正确的图片验证码')
        return
      }
      console.log('mobile check success! start send sms')
      sendMessage({ phoneNumber: this.form.mobileNum }).then(function (res) {
        console.log(res)
        if (res.code == 200) {
          _this.sendCodeInterval()
          _this.disabled = true
          _this.smsCode = res.data
        }
      })
    },
    sendCodeInterval: function () {
      this.sendCode = 60
      var _this = this
      var intervalHanlder = setInterval(function () {
        _this.sendCode -= 1
        if (_this.sendCode <= 0) {
          clearInterval(intervalHanlder)
        }
      }, 1000)
    }
  }
}
</script>
<style lang="less">
</style>
